<template>
  <div class="box">
    <!-- 左侧 -->
    <div class="boxLef">
      <div class="leftTop">
        <el-collapse @change="handleChange" class="growlBor">
          <el-collapse-item title="练习室" class="myGrowl">
            <div class="activeCol" @click="toTraining">
                我的练习室
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="leftBot">
        <div>
          <span class="navigation-item-content active"
            @click="toMediaCache"
          >缓存</span>
        </div>
        <div>
          <span class="navigation-item-content">音频库</span>
        </div>
        <div>
          <span class="navigation-item-content"
          @click="toCollection"
          >收藏</span>
        </div>
        <div>
          <span class="navigation-item-content"
          @click="toViewRecords"
          >历史</span>
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="boxRig">
      <div class="rigthTop header-container">
        <!-- 缓存页右侧上 -->
        <div class="header-tab-item hoverable active">
            <span class="title">资源</span>
        </div>
        <div class="header-tab-item hoverable">
            <span class="title">视频课</span>
        </div>
        <div class="header-tab-item hoverable">
            <span class="title">线下课</span>
        </div>
        <div class="header-tab-item hoverable">
            <span class="title">直播课</span>
        </div>
      </div>
      <div class="rigthBot">
        <!-- 缓存页右侧下 -->
        <div class="borBot">
            <div class="search-container">
            <div class="search-input el-input">
           <el-input class="inpCls"
            :prefix-icon="Search"/>
        </div>
        <div class="search-button">
            搜索
        </div>
        <div class="delEvery">
            <span>批量删除</span>
        </div>
        </div>
        <div class="noContent">
            <span class="el-table__empty-text">无更多内容</span>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent,ref, watch } from "vue";
import type { TabsPaneContext } from "element-plus";
import { Calendar, Search } from '@element-plus/icons-vue'
export default defineComponent({
  name: "Collections",
});
</script>
<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter();
const type = ref<number>(0);
const loading = ref<boolean>(false)
const handleChange = (val: string[]) => {
  //   console.log(val);
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
//改变type，控制tab栏高亮显示
const changeType = (val:number)=>{
    type.value = val;
}
//监听值的改变，下方图片闪烁
watch(type,()=>{
    loading.value = true;
    setTimeout(()=>{
        loading.value = false;
    },100)
})

//跳转到training页面
const toTraining = ()=>{
    router.push({
        name: "Training"
    });
}
//跳转到缓存页面
const toMediaCache = ()=>{
    router.push({
        name: "MediaCache"
    });
}
//去收藏页
const toCollection = ()=>{
    router.push({
      name:"Collections"
    })
}
//去历史页
const toViewRecords = ()=>{
    router.push({
      name:"View_records"
    })
}
</script>
<style scoped lang="scss">
//左边栏
.box {
  display: flex;
  margin: 15px 90px;
  // background-color: papayawhip;
}
.boxLef {
  width: 170px;
  justify-content: left;
  flex-direction: column;
  margin-right: 10px;
  box-sizing: border-box;
}
.growlBor {
  border: none;
  width: 170px;
  background-color: #fff;
  margin-bottom: 10px;
}
.myGrowl {
  width: 150px;
  margin: 0 auto;
}
.activeCol {
  text-align: center;
  font-size: 14px;
}
.activeCol:hover {
  color: #f93684;
}
.leftBot{
    width:170px;
    height: 210px;
    // background-color: plum;
    background-color: #fff;
}
.leftBot span {
  font-size: 14px;
  color: #111;
  padding: 17px 21px;
  cursor: pointer;
  position: relative;
  display: block;
  text-decoration: none;
}
.leftBot div span:before {
  background-color: #fff;
  content: " ";
  position: absolute;
  width: 4px;
  height: 37px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
}
.navigation-item-content.active:before,.navigation-item-content:hover:before {
  background-color: #f93684;
}
.navigation-item-content:before {
  background-color: #fff;
  content: " ";
  position: absolute;
  width: 4px;
  height: 37px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
}
.growlBor.navigation-item-content:before {
  background-color: #fff;
  content: " ";
  position: absolute;
  width: 4px;
  height: 37px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
}
//右边栏
.rigthTop {
    // padding: 28px 30px;
    border-radius: 4px;
    // background-color: #fff;
    margin-bottom: 10px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    // background-color: powderblue;
    background-color: #fff;
}
.rigthBot{
    width: 1020px;
    height: 730px;
    // background-color: skyblue;
    position: relative;
    background-color: #fff;   
}
.header-container{
    border-radius: 4px;
    //保留，最后打开
    // background-color: #fff;
    // background-color: pink;
    // position: relative;
}
.header-container .header-tab-item.hoverable{
    cursor: pointer;
}
.header-container .header-tab-item{
    padding: 28px 30px;
    color: #111;
    font-size: 14px;
    position: relative;
}
.header-container .header-tab-item.active:after, .header-container .header-tab-item.hoverable:hover:after {
    background-color: #f93684;
}
.header-tab-item:after {
    position: absolute;
    content: " ";
    background-color: #fff;
    height: 4px;
    width: 37px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: background-color .3s ease;
}
.search-container{
    display: inline-block;
    white-space: nowrap;
}
.inpCls{
    width:270px;
    height:40px;
    background-color: #f9f5f8;
    border-color: #eaecf0;
}
.search-container .search-button{
    background: #f5f7f9;
    border-radius: 4px;
    color: #7d8090;
    font-size: 14px;
    display: inline-block;
    padding: 12px 17px;
    margin-left: -20px;
    cursor: pointer;
}
.noContent{
    width: 963px;
    max-height: 60px;
    text-align: center;
    // width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.borBot{
    padding: 10px;
    border-bottom: 1px solid #ebeef5;
}
.el-table__empty-text {
    width: 50%;
    color: #909399;
    font-size: 12px;
}
.delEvery span{
    position: absolute;
    top:3.5%;
    right: 7%;
    font-size: 14px;
}

</style>
